<script setup lang="ts">
import type { AnchorProps } from 'ant-design-vue';


const anchorItems: AnchorProps['items'] = [
  {
    key: 'tug-of-war',
    href: "#tug-of-war",
    title: "拔河"
  },
  {
    key: 'relay-race',
    href: "#relay-race",
    title: "接力赛"
  },
  {
    key: 'sprint',
    href: "#sprint",
    title: "短跑"
  },
  {
    key: 'basketball',
    href: "#basketball",
    title: "篮球"
  }
]

</script>

<template>
  <div class="elevator-navigation">
    <a-anchor :items="anchorItems" />
  </div>
</template>

<style scoped lang="scss">
.elevator-navigation {
  position: fixed;
  right: var(--gap-lg);
  padding-block: var(--gap-lg);
  padding-left: var(--gap-sm);
  padding-right:var(--gap-lg);
  top: 30%;
  background-color: var(--background)
}
</style>